<template xmlns="">
  <div class="mod-config">
    <el-descriptions class="margin-top" title="社团信息" :column="3" border>
      <template slot="extra">
        <el-button type="danger" v-if="sta.rstatus === 1 && dataForm.rstatus !== 1 && dataForm.rstatus !== 2" size="small" @click="reg">社团注册</el-button>
        <el-button type="warning" size="small" @click="update">社团信息</el-button>
        <el-button v-if="dataForm.status === 1" type="success" size="small" @click="applyAc">活动申请</el-button>
        <el-button v-if="dataForm.status === 1" type="primary" size="small" @click="applyBu">经费申请</el-button>
      </template>
      <el-descriptions-item label="社团名">{{ dataForm.name }}</el-descriptions-item>
      <el-descriptions-item label="社长名称">{{ dataForm.ownerUser }}</el-descriptions-item>
      <el-descriptions-item label="挂靠学院">{{ dataForm.academyName }}</el-descriptions-item>
      <el-descriptions-item label="成立时间">{{ dataForm.createTime }}</el-descriptions-item>
      <el-descriptions-item label="成员人数">{{ dataForm.perNum }}</el-descriptions-item>
      <el-descriptions-item label="社团状态">
        <el-tag size="small" v-if="dataForm.status === 1" type="success">审批通过</el-tag>
        <el-tag size="small" type="warning" v-if="dataForm.status === 0">学院审批</el-tag>
        <el-tag size="small" type="danger" v-if="dataForm.status === 2">审批未通过</el-tag>
        <el-tag size="small" type="primary" v-if="dataForm.status === 3">校级审批</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="活动次数">{{ dataForm.acNum }}</el-descriptions-item>
      <el-descriptions-item label="社团经费">{{ dataForm.budget }}</el-descriptions-item>
      <el-descriptions-item label="注册状态">
        <el-tag size="small" v-if="dataForm.rstatus === 1" type="success">已注册</el-tag>
        <el-tag size="small" type="warning" v-if="dataForm.rstatus === 0">未注册</el-tag>
        <el-tag size="small" type="danger" v-if="dataForm.rstatus === 2">注册驳回</el-tag>
        <el-tag size="small" type="primary" v-if="dataForm.rstatus === 3">审批中</el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <el-tabs style="margin-top: 20px">
      <el-tab-pane label="活动申请" name="first">
        <club-activity ref="activity"></club-activity>
      </el-tab-pane>
      <el-tab-pane label="经费申请" name="second">
        <clubbudget-list ref="budget"></clubbudget-list>
      </el-tab-pane>
      <el-tab-pane label="考核记录" name="third">
        <clubexam-list></clubexam-list>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="活动申请"
      :close-on-click-modal="false"
      :visible.sync="acVisble">
      <el-form :model="dataForm1" :rules="dataRule1" ref="dataForm1" @keyup.enter.native="dataFormSubmit1()"
               label-width="80px">
        <el-form-item label="活动名称" prop="activityName">
          <el-input v-model="dataForm1.activityName" placeholder="活动名称"></el-input>
        </el-form-item>
        <el-form-item label="活动时间" prop="activityTime">
          <el-date-picker
            v-model="dataForm1.activityTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择活动开始时间">
          </el-date-picker>
          ------
          <el-date-picker
            v-model="dataForm1.endTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择活动截止时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="活动人数" prop="activityNum">
          <el-input v-model="dataForm1.activityNum" placeholder="活动人数"></el-input>
        </el-form-item>
        <el-form-item label="活动地点" prop="address">
          <el-input v-model="dataForm1.address" placeholder="活动地点"></el-input>
        </el-form-item>
        <el-form-item label="申请资料" prop="url">
          <el-upload
            class="upload-demo"
            action="#"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :http-request="upload"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传申请资料</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit1()">确定</el-button>
    </span>
    </el-dialog>
    <el-dialog
      title="经费申请"
      :close-on-click-modal="false"
      :visible.sync="buVisble">
      <el-form :model="dataForm2" :rules="dataRule2" ref="dataForm2" @keyup.enter.native="dataFormSubmit2()"
               label-width="80px">
        <el-form-item label="申请活动" prop="application">
          <el-select v-model="dataForm2.application" placeholder="请选择活动" style="width: 100%;">
            <el-option
              v-for="item in acList"
              :key="item.activityName"
              :label="item.activityName"
              :value="item.activityName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请金额" prop="price">
          <el-input v-model="dataForm2.price" placeholder="申请金额"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="cancel2">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit2()">确定</el-button>
    </span>
    </el-dialog>
    <el-dialog
      title="注册申请"
      :close-on-click-modal="false"
      :visible.sync="visible3">
      <el-form :model="dataForm3" :rules="dataRule3" ref="dataForm3" @keyup.enter.native="dataFormSubmit3()" label-width="80px">
        <el-form-item label="社团名" prop="clubName">
          <span>{{ dataForm.name }}</span>
        </el-form-item>
        <el-form-item label="注册资料" prop="url">
          <el-upload
            class="upload-demo"
            action="#"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :http-request="upload3"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="cancel3">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit3()">确定</el-button>
    </span>
    </el-dialog>
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="init"></add-or-update>
  </div>
</template>

<script>
import clubActivity from './clubActivityList'
import clubbudgetList from './clubbudgetList'
import addOrUpdate from './myClub-add-or-update'
import clubexamList from './clubexamList'

export default {
  components: {
    clubActivity,
    clubbudgetList,
    addOrUpdate,
    clubexamList
  },
  data () {
    return {
      visible3: false,
      dataRule3: {
        url: [
          { required: true, message: '注册资料不能为空', trigger: 'blur' }
        ]
      },
      dataForm3: {
        id: 0,
        clubName: '',
        clubId: '',
        url: '',
        createTime: '',
        status: ''
      },
      addOrUpdateVisible: false,
      dataRule2: {
        price: [
          {required: true, message: '申请金额不能为空', trigger: 'blur'}
        ],
        application: [
          {required: true, message: '申请用途不能为空', trigger: 'blur'}
        ]
      },
      dataForm2: {
        price: '',
        application: ''
      },
      fileList: [],
      acVisble: false,
      buVisble: false,
      dataForm1: {
        activityName: '',
        activityTime: '',
        endTime: '',
        activityNum: '',
        url: ''
      },
      sta: {
        rstatus: 0,
        sstatus: 0
      },
      acList: [],
      dataForm: {
        id: 0,
        name: '',
        ownerId: '',
        ownerUser: '',
        status: '',
        rstatus: '',
        academyId: '',
        academyName: '',
        introduce: '',
        createTime: '',
        acNum: '',
        budget: '',
        perNum: ''
      },
      dataRule1: {
        clubId: [
          {required: true, message: '社团ID不能为空', trigger: 'blur'}
        ],
        clubName: [
          {required: true, message: '社团名称不能为空', trigger: 'blur'}
        ],
        activityName: [
          {required: true, message: '活动名称不能为空', trigger: 'blur'}
        ],
        activityTime: [
          {required: true, message: '活动时间不能为空', trigger: 'blur'}
        ],
        activityNum: [
          {required: true, message: '活动人数不能为空', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '活动地点不能为空', trigger: 'blur'}
        ],
        url: [
          {required: true, message: '申请资料不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    cancel3 () {
      this.visible3 = false
      this.fileList = []
      this.dataForm3.url = ''
    },
    dataFormSubmit3 () {
      this.$refs['dataForm3'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/club/clubreg/save`),
            method: 'post',
            data: this.$http.adornData({
              'clubName': this.dataForm.name,
              'clubId': this.dataForm.id,
              'url': this.dataForm3.url
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.cancel3()
                  this.init()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    reg () {
      this.visible3 = true
    },
    update () {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(this.dataForm.id)
      })
    },
    dataFormSubmit2 () {
      this.$refs['dataForm2'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/club/clubbudget/save`),
            method: 'post',
            data: this.$http.adornData({
              'clubId': this.dataForm.id,
              'clubName': this.dataForm.name,
              'price': this.dataForm2.price,
              'application': this.dataForm2.application
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.cancel2()
                  this.init()
                  this.$nextTick(() => {
                    this.$refs.budget.getDataList()
                  })
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    cancel2 () {
      this.dataForm2.price = ''
      this.dataForm2.application = ''
      this.buVisble = false
    },
    cancel () {
      this.acVisble = false
      this.dataForm1.activityTime = ''
      this.dataForm1.endTime = ''
      this.dataForm1.url = ''
      this.dataForm1.activityName = ''
      this.dataForm1.address = ''
      this.dataForm1.activityNum = ''
      this.fileList = []
    },
    upload3 (param) {
      const formData = new FormData()
      formData.append('file', param.file)
      this.$http.post('http://localhost:8080/sys/upload', formData).then(resp => {
        console.log(resp)
        this.dataForm3.url = resp.data.msg
      })
    },
    upload (param) {
      const formData = new FormData()
      formData.append('file', param.file)
      this.$http.post('http://localhost:8080/sys/upload', formData).then(resp => {
        console.log(resp)
        this.dataForm1.url = resp.data.msg
      })
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    dataFormSubmit1 () {
      this.$refs['dataForm1'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/club/clubactivity/save`),
            method: 'post',
            data: this.$http.adornData({
              'clubId': this.dataForm.id,
              'clubName': this.dataForm.name,
              'activityName': this.dataForm1.activityName,
              'activityTime': this.dataForm1.activityTime,
              'endTime': this.dataForm1.endTime,
              'address': this.dataForm1.address,
              'activityNum': this.dataForm1.activityNum,
              'url': this.dataForm1.url
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.cancel()
                  this.init()
                  this.$nextTick(() => {
                    this.$refs.activity.getDataList()
                  })
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    applyAc () {
      this.acVisble = true
    },
    applyBu () {
      this.$http({
        url: this.$http.adornUrl(`/club/clubactivity/selectAll`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.acList = data.list
        }
      })
      this.buVisble = true
    },
    init () {
      this.$http({
        url: this.$http.adornUrl(`/club/clubconfig/info/1`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.sta.rstatus = data.clubConfig.rstatus
          this.sta.sstatus = data.clubConfig.sstatus
        }
      })
      this.$http({
        url: this.$http.adornUrl(`/club/clubinfo/getByUser`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataForm.id = data.clubInfo.id
          this.dataForm.name = data.clubInfo.name
          this.dataForm.ownerId = data.clubInfo.ownerId
          this.dataForm.ownerUser = data.clubInfo.ownerUser
          this.dataForm.status = data.clubInfo.status
          this.dataForm.rstatus = data.clubInfo.rstatus
          this.dataForm.academyId = data.clubInfo.academyId
          this.dataForm.academyName = data.clubInfo.academyName || '无'
          this.dataForm.introduce = data.clubInfo.introduce
          this.dataForm.createTime = data.clubInfo.createTime
          this.dataForm.acNum = data.clubInfo.acNum
          this.dataForm.budget = data.clubInfo.budget
          this.dataForm.perNum = data.clubInfo.perNum
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
